<template>
	<view class="container">
		<Header>委员之家</Header>
		<view class="content">
			<view class="top">
				<image src="https://zhzx.on-line-demo.com/image/wyzj-top.png" mode="widthFix" style="width: 100%;"></image>
				<view class="title-text">
					<view>委员之家</view>
					<text class="sub-title">会员风采/学习交流/委员通</text>
				</view>
			</view>
			<view class="notice">
				<uni-list>
					<uni-list-item direction="row" to="/pages/memberHome/memberDemeanour">
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/wyfc.png" mode="widthFix" style="width: 26px;height: 26px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">委员风采</view>
								<view class="tip">发布委员个人风采展示</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item direction="row" to="/pages/memberHome/study">
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/xxjl.png" mode="widthFix" style="width: 30px;height: 30px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">学习交流</view>
								<view class="tip">学习心得和感悟</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item direction="row" to="/pages/memberHome/members">
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/wyt.png" mode="widthFix" style="width: 24px;height: 24px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">委员通</view>
								<view class="tip">通讯录</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<!-- <Footer :idx="3"></Footer> -->
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import Footer from '../../components/footer.vue'
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			pageTo(url){
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f4f4f4;
		height: 100%;
		overflow-y: auto;
	}

	.content {
		padding: 0px 10px;
		.top {
			margin-top: -30px;
			margin-bottom: 10px;
			position: relative;

			.title-text {
				position: absolute;
				z-index: 2;
				left: 30px;
				top: 50%;
				transform: translateY(-50%);
				color: #fff;
				margin-top: 30px;
				font-size: 22px;
			}
			.sub-title{
				font-size: 12px;
			}
		}


		.notice {
			background-color: #fff;
			margin: 15px 0px;
			border-radius: 15px;
			overflow: hidden;
			.uni-content{
				justify-content: center;
			}
			.uni-icon{
				width: 50px;
				height: 50px;
				border: 1px solid #d2d2d4;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10px 30px 10px 10px;
			}
			.name{
				font-weight: bold;
				font-size: 16px;
				margin-bottom: 8px;
			}
			.tip{
				font-size: 14px;
				color: #909090;
			}
		}
	}
</style>